<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>扫描结果管理</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
    <style>
        .layui-footer {
            position: static !important;
            width: auto;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">教育工程认证系统</div>
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
            <li class="layui-nav-item layui-hide-xs"><a href="">分支系统</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="">备份系统</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="">追溯系统</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">日志系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">日志服务1</a></dd>
                    <dd><a href="">日志服务2</a></dd>
                    <dd><a href="">日志服务3</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
                    tester
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">个人信息</a></dd>
                    <dd><a href="">退出登录</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-filter="side-nav">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">认证</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Main.html">主页</a></dd>
                        <dd><a href="Student.html">学生信息管理</a></dd>
                        <dd><a href="Major.html">专业信息管理</a></dd>
                        <dd><a href="Teacher.html">教师信息管理</a></dd>
                        <dd><a href="Course.html">学科信息管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">漏洞扫描管理</a>
                    <dl class="layui-nav-child">
                        <dd class="layui-this"><a href="ScanResult.html">扫描结果</a></dd>
                        <dd><a href="RiskLevel.html">风险等级</a></dd>
                        <dd><a href="Vulnerability.html">安全漏洞</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <div style="padding: 15px;">
            <fieldset class="layui-elem-field">
                <legend>筛选条件</legend>
                <div class="layui-field-box">
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">扫描名称</label>
                        <div class="layui-input-inline">
                            <input type="text" id="search_scanName" placeholder="请输入扫描名称" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-inline">
                            <select id="search_status">
                                <option value="">请选择状态</option>
                                <option value="已完成">已完成</option>
                                <option value="进行中">进行中</option>
                                <option value="已取消">已取消</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-pane">
                        <div class="layui-inline">
                            <button class="layui-btn layui-btn-radius layui-btn-warm" id="iReset">重置</button>
                            <button class="layui-btn layui-btn-radius layui-btn-normal" id="searchVal">搜索</button>
                        </div>
                    </div>
                </div>
            </fieldset>

            <div style="padding: 15px;">
                <table class="layui-hide" id="test" lay-filter="test"></table>

                <script type="text/html" id="toolbarDemo">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
                        <button class="layui-btn layui-btn-sm" lay-event="insert">新增</button>
                        <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="startScan">启动扫描</button>
                    </div>
                </script>
                <script type="text/html" id="barDemo">

                    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="viewReport">查看报告</a>
                </script>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        copyright © zero_cavalier 2025
    </div>
</div>

<script src="js/jquery-3.6.0.js" charset="utf-8"></script>

<script>
    layui.use(['element', 'layer', 'util', 'table', 'form'], function(){
        var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$
            ,table = layui.table
            ,form = layui.form;

        util.event('lay-header-event', {
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
                layer.open({
                    type: 1
                    ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt'
                    ,anim: 5
                    ,shadeClose: true
                });
            }
        });

        $("#iReset").click(function () {
            $("#search_scanName").val("");
            $("#search_status").val("");
            form.render('select');
            flashTable("", "");
        });

        $("#searchVal").click(function () {
            let search_scanName = $("#search_scanName").val();
            let search_status = $("#search_status").val();
            flashTable(search_scanName, search_status);
        });

        function flashTable(scanName, status){
            let searchJSON = {};
            if (scanName != null && scanName != "") {
                searchJSON.scanName = scanName;
            }
            if (status != null && status != "") {
                searchJSON.status = status;
            }

            table.render({
                elem: '#test',
                url: '/scan/select',
                where: searchJSON,
                toolbar: '#toolbarDemo',
                title: '扫描结果表',
                cols: [[
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true},
                    {field: 'scanName', title: '扫描名称', width: 150},
                    {field: 'target', title: '扫描目标', width: 150},
                    {field: 'startTime', title: '开始时间', width: 170},
                    {field: 'endTime', title: '结束时间', width: 170},
                    {field: 'status', title: '状态', width: 100},
                    {field: 'description', title: '描述', width: 200},
                    {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                ]],
                page: true
            });

            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：' + data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选' : '未全选')
                        break;
                    case 'insert':
                        layer.open({
                            type: 1,
                            title: '新增扫描结果',
                            closeBtn: false,
                            area: ['500px', '500px'],
                            shade: 0.5,
                            id: 'LAY_layuipro',
                            btn: ['新增', '取消'],
                            btnAlign: 'c',
                            moveType: 1,
                            content: $('#insert_form').html(),
                            btn1: function (index, layero) {
                                let scanName = $("#insert_scanName").val();
                                let target = $("#insert_target").val();
                                let startTime = $("#insert_startTime").val();
                                let endTime = $("#insert_endTime").val();
                                let status = $("#insert_status").val();
                                let description = $("#insert_description").val();

                                if (!scanName || !target || !startTime) {
                                    layer.msg("请填写必要信息!");
                                    return false;
                                }

                                $.ajax({
                                    url: "/scanResult/insert",
                                    type: "post",
                                    cache: false,
                                    contentType: "application/json;charset=utf-8",
                                    data: JSON.stringify({
                                        scanName: scanName,
                                        target: target,
                                        startTime: startTime,
                                        endTime: endTime,
                                        status: status,
                                        description: description
                                    }),
                                    dataType: "json",
                                    success: function (response) {
                                        if (response.code === 200) {
                                            layer.msg("新增成功!");
                                            layer.close(index);
                                            table.reload('test');
                                        } else {
                                            layer.msg("新增失败: " + response.msg);
                                        }
                                    },
                                    error: function (response) {
                                        layer.msg("新增请求失败!");
                                        console.log("出错返回: " + response);
                                    }
                                });
                            }
                        });
                        break;
                    case 'startScan':
                        layer.open({
                            type: 1,
                            title: '启动扫描',
                            closeBtn: false,
                            area: ['500px', '300px'],
                            shade: 0.5,
                            id: 'LAY_layuipro',
                            btn: ['启动', '取消'],
                            btnAlign: 'c',
                            moveType: 1,
                            content: $('#scan_form').html(),
                            btn1: function (index, layero) {
                                let scanName = $("#scan_scanName").val();
                                let target = $("#scan_target").val();

                                if (!target) {
                                    layer.msg("请填写扫描目标!");
                                    return false;
                                }

                                $.ajax({
                                    url: "/scan/start",
                                    type: "post",
                                    cache: false,
                                    contentType: "application/json;charset=utf-8",
                                    data: JSON.stringify({
                                        scanName: scanName,
                                        target: target
                                    }),
                                    dataType: "json",
                                    success: function (response) {
                                        if (response.code === 200) {
                                            layer.msg("扫描任务已启动，任务ID: " + response.taskId);
                                            layer.close(index);
                                            table.reload('test');
                                        } else {
                                            layer.msg("启动失败: " + response.message);
                                        }
                                    },
                                    error: function (response) {
                                        layer.msg("启动请求失败!");
                                        console.log("出错返回: " + response);
                                    }
                                });
                            }
                        });
                        break;
                }
            });

            table.on('tool(test)', function (obj) {
                let data = obj.data;

                if (obj.event === 'del') {
                    layer.confirm('确定要删除"' + data.scanName + '"的记录吗？此操作不可恢复！', {
                        title: '删除确认',
                        icon: 3,
                        btn: ['确认删除', '取消']
                    }, function(index) {
                        $.ajax({
                            url: "/scanResult/delete",
                            type: "post",
                            cache: false,
                            contentType: "application/json;charset=utf-8",
                            data: JSON.stringify({
                                id: data.id
                            }),
                            dataType: "json",
                            success: function (response) {
                                if (response.code === 200) {
                                    layer.msg("删除成功!", {icon: 1});
                                    obj.del();
                                } else {
                                    layer.msg("删除失败: " + response.msg, {icon: 2});
                                }
                            },
                            error: function (response) {
                                layer.msg("删除请求失败!", {icon: 2});
                                console.log("出错返回: " + response);
                            }
                        });
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    layer.open({
                        type: 1,
                        title: '编辑扫描结果',
                        closeBtn: false,
                        area: ['500px', '500px'],
                        shade: 0.5,
                        id: 'LAY_layuipro',
                        btn: ['编辑', '取消'],
                        btnAlign: 'c',
                        moveType: 1,
                        content: $('#edit_form').html(),
                        btn1: function (index, layero) {
                            let id = $("#edit_id").val();
                            let scanName = $("#edit_scanName").val();
                            let target = $("#edit_target").val();
                            let startTime = $("#edit_startTime").val();
                            let endTime = $("#edit_endTime").val();
                            let status = $("#edit_status").val();
                            let description = $("#edit_description").val();

                            if (!scanName || !target || !startTime) {
                                layer.msg("请填写必要信息!");
                                return false;
                            }

                            $.ajax({
                                url: "/scanResult/update",
                                type: "post",
                                cache: false,
                                contentType: "application/json;charset=utf-8",
                                data: JSON.stringify({
                                    id: id,
                                    scanName: scanName,
                                    target: target,
                                    startTime: startTime,
                                    endTime: endTime,
                                    status: status,
                                    description: description
                                }),
                                dataType: "json",
                                success: function (response) {
                                    if (response.code === 200) {
                                        layer.msg("编辑成功!");
                                        layer.close(index);
                                        table.reload('test');
                                    } else {
                                        layer.msg("编辑失败: " + response.msg);
                                    }
                                },
                                error: function (response) {
                                    layer.msg("编辑请求失败!");
                                    console.log("出错返回: " + response);
                                }
                            });
                        },
                        success: function (layero) {
                            $("#edit_id").val(data.id);
                            $("#edit_scanName").val(data.scanName);
                            $("#edit_target").val(data.target);
                            $("#edit_startTime").val(data.startTime);
                            $("#edit_endTime").val(data.endTime);
                            $("#edit_status").val(data.status);
                            $("#edit_description").val(data.description);
                        }
                    });
                } else if (obj.event === 'viewReport') {
                    // 查看报告功能
                    layer.open({
                        type: 1,
                        title: '扫描报告 - ' + data.scanName,
                        area: ['800px', '600px'],
                        content: '<div style="padding: 20px;"><p>正在获取扫描报告...</p><div id="report-content"></div></div>',
                        success: function(layero, index) {
                            // 获取扫描报告
                            $.ajax({
                                url: "/scan/report/" + data.id,
                                type: "get",
                                success: function (response) {
                                    if (response.code === 200) {
                                        $('#report-content').html('<pre>' + response.report + '</pre>');
                                    } else {
                                        $('#report-content').html('<p>获取报告失败: ' + response.message + '</p>');
                                    }
                                },
                                error: function () {
                                    $('#report-content').html('<p>获取报告请求失败!</p>');
                                }
                            });
                        }
                    });
                }
            });
        }

        flashTable();
    });
</script>

<script type="text/html" id="insert_form">
    <div class="layui-field-box">
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">扫描名称</label>
            <div class="layui-input-inline">
                <input type="text" id="insert_scanName" class="layui-input" placeholder="请输入扫描名称">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">扫描目标</label>
            <div class="layui-input-inline">
                <input type="text" id="insert_target" class="layui-input" placeholder="请输入扫描目标">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-inline">
                <input type="text" id="insert_startTime" class="layui-input" placeholder="请输入开始时间">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-inline">
                <input type="text" id="insert_endTime" class="layui-input" placeholder="请输入结束时间">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select id="insert_status">
                    <option value="已完成">已完成</option>
                    <option value="进行中">进行中</option>
                    <option value="已取消">已取消</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-inline">
                <textarea id="insert_description" class="layui-textarea" placeholder="请输入描述"></textarea>
            </div>
        </div>
    </div>
</script>

<script type="text/html" id="edit_form">
    <div class="layui-field-box">
        <input type="hidden" id="edit_id">
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">扫描名称</label>
            <div class="layui-input-inline">
                <input type="text" id="edit_scanName" class="layui-input" placeholder="请输入扫描名称">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">扫描目标</label>
            <div class="layui-input-inline">
                <input type="text" id="edit_target" class="layui-input" placeholder="请输入扫描目标">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-inline">
                <input type="text" id="edit_startTime" class="layui-input" placeholder="请输入开始时间">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-inline">
                <input type="text" id="edit_endTime" class="layui-input" placeholder="请输入结束时间">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select id="edit_status">
                    <option value="已完成">已完成</option>
                    <option value="进行中">进行中</option>
                    <option value="已取消">已取消</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-inline">
                <textarea id="edit_description" class="layui-textarea" placeholder="请输入描述"></textarea>
            </div>
        </div>
    </div>
</script>

<script type="text/html" id="scan_form">
    <div class="layui-field-box">
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">扫描名称</label>
            <div class="layui-input-inline">
                <input type="text" id="scan_scanName" class="layui-input" placeholder="请输入扫描名称">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">扫描目标</label>
            <div class="layui-input-inline">
                <input type="text" id="scan_target" class="layui-input" placeholder="请输入扫描目标（如：192.168.1.1）">
            </div>
        </div>
    </div>
</script>
</body>
</html>
